<template>
  <div>
    <Goback :title="title"></Goback>
    <Noticebar :text="text" />
    <div class="hear" v-show="isSher">
      <div class="img">
        <img src="../img/shoucang.png" style="width: 100%" alt="" />
      </div>
      <p>还没有收藏！！</p>
    </div>
    <div>
      <ul class="mate">
        <li v-for="i in mate" :key="i.id">
          <div class="images">
            <img src="../img/全部.png" style="width: 100%" />
          </div>
          <p>
            <strong>{{ i.name }}</strong>
          </p>
          <p>
            <b>{{ i.txt }}</b>
          </p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import Noticebar from "@/components/index/Noticebar";
import Goback from "@/components/index/Goback";
export default {
  data() {
    return {
      title: "",
      text: "",
      isSher: false,
      mate: [
        {
          id: 1,
          name: "P图白底蓝底照片赚600需要电脑",
          txt: "天河 22022-7-12 800/天",
        },
      ],
    };
  },
  mounted() {
    this.title = this.$route.meta.title;
    this.text = this.$route.meta.text;
    if (this.mate.length > 0) {
      this.isSher = false;
    } else {
      this.isSher = true;
    }
  },
  components: {
    Goback,
    Noticebar,
  },
};
</script>

<style scoped>
.img {
  width: 346px;
  height: 370px;
  margin-left: 188px;
}
.hear {
  height: 100%;
  padding-top: 72px;
}
p {
  color: #c29942;
  text-align: center;
}
.mate li {
  width: 100%;
  height: 100px;
  margin-top: 30px;
  margin-bottom: 30px;
  border: #c1c1c1 1px solid;
}
.images {
  width: 52px;
  height: 52px;
  float: left;
  margin-left: 64px;
  margin-top: 24px;
}
.mate li p {
  color: #000;
  float: left;
  margin-top: 10px;
  margin-left: 60px;
}
.mate li p b {
  font-size: 12px;
  color: #c1c1c1;
}
</style>
